<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>情感分析 - 新闻分析系统</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .sentiment-card {
            transition: transform 0.2s;
        }
        .sentiment-card:hover {
            transform: translateY(-5px);
        }
        .sentiment-positive {
            color: #28a745;
        }
        .sentiment-negative {
            color: #dc3545;
        }
        .sentiment-neutral {
            color: #ffc107;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" th:href="@{/}">新闻分析系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/news}">新闻列表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/analysis/hot}">热度分析</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/analysis/category}">分类分析</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" th:href="@{/analysis/sentiment}">情感分析</a>
                </li>
            </ul>
            <form class="d-flex" th:action="@{/news/search}" method="GET">
                <input class="form-control me-2" type="search" placeholder="搜索新闻..." name="keyword">
                <button class="btn btn-outline-light" type="submit">搜索</button>
            </form>
        </div>
    </div>
</nav>

<main class="container my-4">
    <div class="row">
        <!-- 整体情感分布 -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">整体情感分布</h5>
                </div>
                <div class="card-body">
                    <canvas id="sentimentDistributionChart" height="300"></canvas>
                </div>
            </div>
        </div>

        <!-- 情感趋势 -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">情感趋势分析</h5>
                </div>
                <div class="card-body">
                    <canvas id="sentimentTrendChart" height="300"></canvas>
                </div>
            </div>
        </div>

        <!-- 情感统计卡片 -->
        <div class="col-12 mb-4">
            <div class="row">
                <div class="col-md-4">
                    <div class="card shadow sentiment-card bg-success bg-opacity-10">
                        <div class="card-body text-center">
                            <i class="bi bi-emoji-smile display-4 sentiment-positive"></i>
                            <h5 class="card-title mt-3">正面新闻</h5>
                            <h3 class="card-text sentiment-positive">178</h3>
                            <p class="text-muted">58%</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card shadow sentiment-card bg-warning bg-opacity-10">
                        <div class="card-body text-center">
                            <i class="bi bi-emoji-neutral display-4 sentiment-neutral"></i>
                            <h5 class="card-title mt-3">中性新闻</h5>
                            <h3 class="card-text sentiment-neutral">86</h3>
                            <p class="text-muted">28%</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card shadow sentiment-card bg-danger bg-opacity-10">
                        <div class="card-body text-center">
                            <i class="bi bi-emoji-frown display-4 sentiment-negative"></i>
                            <h5 class="card-title mt-3">负面新闻</h5>
                            <h3 class="card-text sentiment-negative">42</h3>
                            <p class="text-muted">14%</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分类情感分析 -->
        <div class="col-12 mb-4">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">分类情感分析</h5>
                </div>
                <div class="card-body">
                    <canvas id="categorySentimentChart" height="300"></canvas>
                </div>
            </div>
        </div>

        <!-- 情感新闻列表 -->
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">情感新闻列表</h5>
                        <div class="btn-group">
                            <button class="btn btn-sm btn-outline-light active" onclick="filterNews('all')">全部</button>
                            <button class="btn btn-sm btn-outline-light" onclick="filterNews('positive')">正面</button>
                            <button class="btn btn-sm btn-outline-light" onclick="filterNews('neutral')">中性</button>
                            <button class="btn btn-sm btn-outline-light" onclick="filterNews('negative')">负面</button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>标题</th>
                                <th>分类</th>
                                <th>发布时间</th>
                                <th>情感倾向</th>
                                <th>情感得分</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <a href="/news/7" class="text-decoration-none">
                                        中国队在世界羽毛球锦标赛夺得三金
                                    </a>
                                </td>
                                <td>
                                    <span class="badge bg-primary">体育</span>
                                </td>
                                <td>2025-04-30 08:45</td>
                                <td>
                                    <i class="bi bi-emoji-smile text-success"></i>
                                    <span>正面</span>
                                </td>
                                <td>
                                    <div class="progress" style="height: 6px;">
                                        <div class="progress-bar bg-success"
                                             style="width: 85%"
                                             aria-valuenow="85"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small class="text-muted">0.85</small>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="/news/2" class="text-decoration-none">
                                        美国总统签署新行政令加强网络安全
                                    </a>
                                </td>
                                <td>
                                    <span class="badge bg-primary">政治</span>
                                </td>
                                <td>2025-04-27 14:15</td>
                                <td>
                                    <i class="bi bi-emoji-neutral text-warning"></i>
                                    <span>中性</span>
                                </td>
                                <td>
                                    <div class="progress" style="height: 6px;">
                                        <div class="progress-bar bg-warning"
                                             style="width: 45%"
                                             aria-valuenow="45"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small class="text-muted">0.45</small>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="/news/4" class="text-decoration-none">
                                        俄罗斯与白俄罗斯举行联合军事演习
                                    </a>
                                </td>
                                <td>
                                    <span class="badge bg-primary">军事</span>
                                </td>
                                <td>2025-04-29 15:30</td>
                                <td>
                                    <i class="bi bi-emoji-frown text-danger"></i>
                                    <span>负面</span>
                                </td>
                                <td>
                                    <div class="progress" style="height: 6px;">
                                        <div class="progress-bar bg-danger"
                                             style="width: 72%"
                                             aria-valuenow="72"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small class="text-muted">0.72</small>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="/news/13" class="text-decoration-none">
                                        国产大型量子计算机研发取得突破
                                    </a>
                                </td>
                                <td>
                                    <span class="badge bg-primary">科技</span>
                                </td>
                                <td>2025-04-25 11:30</td>
                                <td>
                                    <i class="bi bi-emoji-smile text-success"></i>
                                    <span>正面</span>
                                </td>
                                <td>
                                    <div class="progress" style="height: 6px;">
                                        <div class="progress-bar bg-success"
                                             style="width: 90%"
                                             aria-valuenow="90"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small class="text-muted">0.90</small>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="/news/19" class="text-decoration-none">
                                        多国报告发现新型冠状病毒变异株
                                    </a>
                                </td>
                                <td>
                                    <span class="badge bg-primary">健康</span>
                                </td>
                                <td>2025-04-25 16:30</td>
                                <td>
                                    <i class="bi bi-emoji-frown text-danger"></i>
                                    <span>负面</span>
                                </td>
                                <td>
                                    <div class="progress" style="height: 6px;">
                                        <div class="progress-bar bg-danger"
                                             style="width: 78%"
                                             aria-valuenow="78"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small class="text-muted">0.78</small>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="/news/10" class="text-decoration-none">
                                        国家统计局：一季度GDP同比增长5.3%
                                    </a>
                                </td>
                                <td>
                                    <span class="badge bg-primary">经济</span>
                                </td>
                                <td>2025-04-21 09:15</td>
                                <td>
                                    <i class="bi bi-emoji-smile text-success"></i>
                                    <span>正面</span>
                                </td>
                                <td>
                                    <div class="progress" style="height: 6px;">
                                        <div class="progress-bar bg-success"
                                             style="width: 82%"
                                             aria-valuenow="82"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small class="text-muted">0.82</small>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="/news/16" class="text-decoration-none">
                                        人工智能课程将纳入中小学必修内容
                                    </a>
                                </td>
                                <td>
                                    <span class="badge bg-primary">教育</span>
                                </td>
                                <td>2025-04-26 14:20</td>
                                <td>
                                    <i class="bi bi-emoji-smile text-success"></i>
                                    <span>正面</span>
                                </td>
                                <td>
                                    <div class="progress" style="height: 6px;">
                                        <div class="progress-bar bg-success"
                                             style="width: 88%"
                                             aria-valuenow="88"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small class="text-muted">0.88</small>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="/news/11" class="text-decoration-none">
                                        美联储宣布维持利率不变
                                    </a>
                                </td>
                                <td>
                                    <span class="badge bg-primary">经济</span>
                                </td>
                                <td>2025-04-29 05:30</td>
                                <td>
                                    <i class="bi bi-emoji-neutral text-warning"></i>
                                    <span>中性</span>
                                </td>
                                <td>
                                    <div class="progress" style="height: 6px;">
                                        <div class="progress-bar bg-warning"
                                             style="width: 52%"
                                             aria-valuenow="52"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small class="text-muted">0.52</small>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-light py-4 mt-5">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h5>新闻分析系统</h5>
                <p class="text-muted">提供多维度的新闻数据分析与可视化</p>
            </div>
            <div class="col-md-6 text-md-end">
                <p>&copy; 2025 新闻分析系统</p>
            </div>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // 情感分布数据
    const positiveCount = 178;
    const neutralCount = 86;
    const negativeCount = 42;

    // 情感趋势数据
    const trendData = [
        { date: '4-24', positive: 62, negative: 21 },
        { date: '4-25', positive: 58, negative: 18 },
        { date: '4-26', positive: 65, negative: 22 },
        { date: '4-27', positive: 70, negative: 15 },
        { date: '4-28', positive: 73, negative: 19 },
        { date: '4-29', positive: 68, negative: 24 },
        { date: '4-30', positive: 72, negative: 20 }
    ];

    // 分类情感分析数据
    const categorySentimentData = [
        { category: '政治', positive: 62, neutral: 25, negative: 13 },
        { category: '军事', positive: 48, neutral: 20, negative: 32 },
        { category: '体育', positive: 75, neutral: 18, negative: 7 },
        { category: '科技', positive: 78, neutral: 15, negative: 7 },
        { category: '经济', positive: 60, neutral: 30, negative: 10 },
        { category: '教育', positive: 72, neutral: 22, negative: 6 },
        { category: '健康', positive: 45, neutral: 25, negative: 30 },
        { category: '娱乐', positive: 65, neutral: 25, negative: 10 }
    ];

    // 情感分布图
    new Chart(document.getElementById('sentimentDistributionChart'), {
        type: 'doughnut',
        data: {
            labels: ['正面', '中性', '负面'],
            datasets: [{
                data: [positiveCount, neutralCount, negativeCount],
                backgroundColor: ['#28a745', '#ffc107', '#dc3545']
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right'
                }
            }
        }
    });

    // 情感趋势图
    new Chart(document.getElementById('sentimentTrendChart'), {
        type: 'line',
        data: {
            labels: trendData.map(d => d.date),
            datasets: [{
                label: '正面情感',
                data: trendData.map(d => d.positive),
                borderColor: '#28a745',
                tension: 0.1
            }, {
                label: '负面情感',
                data: trendData.map(d => d.negative),
                borderColor: '#dc3545',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // 分类情感分析图
    new Chart(document.getElementById('categorySentimentChart'), {
        type: 'bar',
        data: {
            labels: categorySentimentData.map(d => d.category),
            datasets: [{
                label: '正面比例',
                data: categorySentimentData.map(d => d.positive),
                backgroundColor: '#28a745'
            }, {
                label: '中性比例',
                data: categorySentimentData.map(d => d.neutral),
                backgroundColor: '#ffc107'
            }, {
                label: '负面比例',
                data: categorySentimentData.map(d => d.negative),
                backgroundColor: '#dc3545'
            }]
        },
        options: {
            responsive: true,
            scales: {
                x: {
                    stacked: true
                },
                y: {
                    stacked: true,
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });

    // 过滤新闻列表
    function filterNews(sentiment) {
        // 模拟过滤功能，实际应用中会通过AJAX请求服务器
        console.log('过滤情感：' + sentiment);
        // 切换按钮状态
        document.querySelectorAll('.btn-group .btn').forEach(btn => {
            btn.classList.remove('active');
        });
        event.target.classList.add('active');
    }
</script>
</body>
</html>